import { T } from 'base/intl';import styled, { createGlobalStyle, css } from "styled-components";

const flippableImageStyle = css`
  .flippable-image-wrapper {
    border: 1px solid blue;
    width: 160px;
    height: 220px;
    position: relative;
    cursor: pointer;
    z-index: 201;
    .back,
    .front {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      transition: all 0.5s ease-in-out;
    }
    .front {
      &:hover {
        transform: scale(1.1);
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    .back {
      transform: rotateY(180deg);
      .desc{
        text-decoration: wavy #c9c9c9 underline;
      }
    }
    &.isFlipped {
      transform: rotateY(180deg);
      .back {
        transform: rotateY(360deg);
      }
      .front {
        transform: rotateY(180deg);
      }
    }
  }
`;

const flippableImageContainer = styled.div`
  ${flippableImageStyle}
`;

const RandomImageContainer = styled.div`
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .random-image-container {
    border: 1px solid blue;
    width: 160px;
    height: 220px;
    position: absolute;
    cursor: pointer;
    transition: all 1s ease;
    opacity: 0.8;
    &:hover {
      opacity: 1;
    }
    img {
        width: 100%;
        height: 100%;
      }

    animation: fadeIn 1s ease-in-out both;
  }
  .selected {
    transform: scale(1.2) rotateY(180deg) translate(50%,-50%);
    z-index: 10;
    opacity: 1;
    transition-delay: 0.2s; /* 使放大和旋转有先后顺序 */
    top: 50%;
    left: 50%;
    img {
        opacity: 0;
      }
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: inherit;
      background-size: cover;
      background-position: center;
      transform: rotateY(180deg);
      transition: all 1s ease;
      z-index: 1;
    }
  }
`;

export default {
  flippableImageContainer,
  RandomImageContainer
};